<style lang="less" scoped>
.menu-indicator {
  bottom: 0px;
  height: 2px;
  background-color: @primary-color;
  transition: all .2s cubic-bezier(0.4, 0, 1, 1);
}
</style>
<template>
    <div ref="m_menu" class="position-r d-i-flex-row align-items-center">
        <div v-for="(item,index) in menulist" :key="`${index}-m-menu`" 
            class="d-flex-row"
            @click="switchIndicator(index)">
            <slot :menu="setMenu(item,index)">
                {{item.title}}
            </slot>
        </div>
        <i class="position-a menu-indicator" 
            :style="{
            left: menuIndicator[indicator] ? menuIndicator[indicator].left : '0%',
            right: menuIndicator[indicator] ? menuIndicator[indicator].right : '100%'
            }"></i>

    </div>
</template>
<script>
export default {
    name: "m-menu",
    props: {
        value: {},
        /**
         * ### 菜单列表
         * [{title: string}]
         */
        menulist: {
            type: Array,
        }
    },
    data() {
        return {
            indicator: this.value,
            menuIndicator: [],
        }
    },
    watch: {
        "value": function (newVal) {
            this.indicator = newVal
        },
        "menulist": function (newVal) {
            // //console.log('menulist,watch');
            this.$nextTick(()=>{
                this.createdMenu()
            })
        }
    },
    created(){
        if(this.menulist && this.menulist.length > 0 ){
            this.menulist.forEach((item,index)=>{
                this.menuIndicator.push({
                    left: '0%',
                    right: '100%'
                }) 
            })
        }
    },
    mounted() {
        this.$nextTick(()=>{
            this.createdMenu()
        })
    },
    methods: {
        createdMenu(){
            let _menuWidth = this.$refs.m_menu.offsetWidth
            let _children = Array.from(this.$refs.m_menu.children);
            this.menuIndicator = Array(_children.length - 1)
            //console.log('mmenu', _children);
            for (let index = 0; index < _children.length - 1; index++) {
                let leftNum = 0
                let rightNum = 0
                if(_children[index]){
                leftNum = _children[index].offsetLeft / _menuWidth * 100
                }
                rightNum = index === (_children.length - 1)
                            ? (_menuWidth - _children[index].offsetLeft) / _menuWidth * 100
                            : (_menuWidth - (_children[index].offsetLeft + _children[index].offsetWidth)) / _menuWidth * 100

                this.menuIndicator[index] = {
                    left: `${leftNum}%`,
                    right: `${rightNum}%`
                }
            }
        },
        switchIndicator(index){
            // //console.log("asd");
            this.$emit("change", index)
            this.indicator = index
        },
        setMenu(item,index){
            return {item, index}
        }
    }
}
</script>